<template>
  <view class="you-popup">
    <uni-popup
      ref="popup"
      :type="popupType"
      :animation="animation"
      :is-mask-click ="isMaskClick"
      :mask-background-color="maskBgColor"
      background-color="rgba(0, 0, 0, 0)"
      :safe-area="safeArea"
      @maskClick="maskClick"
    >
      <view
        class="popup-content"
        :style="{
          width: dialogWidth,
          backgroundColor: bgColor,
          borderRadius: borderRadiusMap[popupType],
          paddingBottom: popupType === 'bottom' && needSafeHeight ? safeHeight : 0
        }"
      >
        <view class="title" v-if="showTitle">{{ popupTitle }}</view>
        <view class="content">
          <slot name="popupContent"></slot>
        </view>
        <view class="btn-box" v-if="showBtn">
          <view class="cancel-btn" @click="clickCancel">取消</view>
          <view class="confirm-btn" @click="clickConfirm">确认</view>
          <slot name="btnBox" v-if="btnSlot"></slot>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    name: 'MobileProjectIndex',

    data() {
      return {
        safeHeight: '',
        borderRadiusMap: {
          'center': '16rpx',
          'bottom': '16rpx 16rpx 0 0',
          'top': '0 0 16rpx 16rpx'
        }
      }
    },
    props: {
      popupVisible: {
        type: Boolean,
        default: false
      },
      dialogWidth: {
        type: String,
        default: '600rpx'
      },
      popupType: {
        type: String,
        default: 'center'
      },
      showTitle: {
        type: Boolean,
        default: true
      },
      popupTitle: {
        type: String,
        default: '弹窗标题'
      },
      animation: {
        type: Boolean,
        default: true
      },
      isMaskClick: {
        type: Boolean,
        default: true
      },
      maskBgColor: {
        type: String,
        default: 'rgba(0,0,0,0.4)'
      },
      bgColor: {
        type: String,
        default: '#FFF'
      },
      safeArea: {
        type: Boolean,
        default: false
      },
      showBtn: {
        type: Boolean,
        default: true
      },
      needSafeHeight: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      popupVisible: {
        handler(newVal, oldVal) {
          if (newVal) {
            this.$refs.popup.open()
          } else {
            this.$refs.popup.close()
          }
        }
      }
    },
    created() {
      this.safeHeight = this.$store.getters.heightData.safeHeight + 'px'
    },
    methods: {
      maskClick() {
        this.$emit('popupClose');
      },
      clickCancel() {
        this.$emit('cancel')
      },
      clickConfirm() {
        this.$emit('confirm')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .popup-content {
    .title {
      width: 100%;
      padding: 30rpx 0;
      text-align: center;
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .btn-box {
      display: flex;
      align-items: center;
      border-top: 2rpx solid #EEE;
      .cancel-btn,
      .confirm-btn {
        width: 50%;
        height: 108rpx;
        line-height: 108rpx;
        text-align: center;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
      }
      .confirm-btn {
        border-left: 2rpx solid #eee;
        color: #0b3f35;
      }
    }
  }
</style>